<template>
  <div class="exchangeGoods">
	<div class="return-type-wrap">
	  <div class="return-type clear">
		<div class="to-store fl clear"><img src="../assets/image/widget@2x.png" class="fl"/><p class="fr">到店换货</p></div>
		<div class="express fr clear"><img src="../assets/image/widget_pre@2x.png" class="fl"/><p class="fr">快递换货</p></div>
	  </div>
	</div>
	<div class="logisticsbar hidden">
	  <p class="logistics-company"><span class="fl">物流公司</span><img src="../assets/image/ico_arrows@2x.png" class="fr"/></p>
	  <P class="logistics-number">物流单号</P>
	  <input type="text" value="123456444555" class="number-input"/>
	</div>
	<div class="store-msg">
	  <p>门店名称：乐町女装旗舰店</p>
	  <p>门店地址：广东省深圳市南山区阳光科创广东省深圳市南山区阳光科创</p>
	  <p>门店电话：0755-8838388</p>
	  <p>营业时间：周一，周二，周三，周四：10：00-22：00&nbsp;&nbsp;周五，周六，周日：7：00-24：00</p>
	</div>
	<div class="button-wrap"><button class="submit">提交</button></div>
	<!--物流公司弹窗-->
	<div class="popup hidden">
	  <div class="popup-content">
		<p>选择快递</p>
		<p>圆通</p>
		<p>申通</p>
		<p>中通</p>
		<p>顺丰</p>
		<p>邮政</p>
		<p>韵达</p>
		<button>确定</button>
	  </div>
	</div>
  </div>
</template>
<script>
  import Vue from 'vue'

  export default {
	data () {
	  return {

	  }},
	name: 'app',
	methods: {}
  }
</script>
<style lang="scss">
.exchangeGoods{
	background: #fff;
	.return-type-wrap{width: 100%; border-top: 0.2rem solid #f4f5f5;}
	.return-type{
		width:4.44rem; padding:0.34rem 0; margin: 0 auto;
		div{
			width: 1.78rem;
			+div{margin-left: 0.88rem;}
			img{display: block; width: 0.32rem; height: 0.32rem;}
			p{height:0.32rem; font-size: 0.32rem; line-height: 0.32rem; color: #333;}
		}
	}
	.logisticsbar{
	height:3.82rem; border-top: 0.2rem solid #f4f5f5;
	.logistics-company{
		width: 100%; height:0.88rem;
		span{display: block; height: 0.28rem; padding: 0.3rem 0 0.3rem 0.3rem; font-size: 0.28rem; line-height: 0.28rem; color: #333;}
		img{display: block; width:0.14rem; height: 0.28rem; padding: 0.3rem 0.3rem 0.3rem 0;}
	}
	.logistics-number{width: 100%; height: 0.88rem; font-size: 0.28rem; text-indent: 0.3rem; line-height: 0.88rem; color: #333;}
	.number-input{display: block; width: 6.2rem; height: 0.78rem; margin: 0 auto; padding:0 0.2rem; border: 0; border-radius: 0.08rem; font-size: 0.28rem; line-height: 0.78rem; background: #f4f5f5; color: #333;}
	}
	.store-msg{
		height: 3.82rem; width: 100%; border-top: 0.2rem solid #f4f5f5;
		p{padding:0 0.3rem; margin-top:0.28rem; font-size: 0.28rem; line-height: 0.38rem; color: #333;}
	}
	.button-wrap{width: 100%;}
	.submit{display:block; width: 6.2rem; height: 0.88rem; margin: 0 auto; border-radius: 0.1rem; font-size: 0.28rem; text-align: center; line-height: 0.88rem; background: #fe4a6b; color: #fff;}
	.popup{width: 100%; height: 100%; background: rgba(0,0,0,.2); position: fixed; left: 0; top: 0; z-index: 20;}
	.popup-content{
		position:absolute; left:0; bottom:0; width: 100%; max-height: 7.16rem; background:#fff;
		p{
			margin: 0 0.3rem; height: 0.88rem; font-size: 0.28rem; line-height: 0.88rem; color: #585757;
			+p{border-top: 0.02rem solid #eee;}
		}
		button{display:block; width: 100%; height: 0.88rem; font-size: 0.28rem; text-align: center; line-height: 0.88rem; color: #fefefe; background: linear-gradient(to right,#fe4a6b,#e8163f);}
	}
}
</style>